.chat-with-id-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px; // 增加最大宽度，充分利用屏幕空间
  height: 100%;
  transition: max-width 0.3s ease; // 添加宽度变化过渡动画
  .chat-warp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(100vh - 60px);
    .control-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: var(--el-bg-color, #ffffff);
      border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0);
      .thinking-control {
        display: flex;
        align-items: center;
      }
      .width-control {
        display: flex;
        gap: 12px;
        align-items: center;
        .width-label {
          font-size: 12px;
          color: var(--el-text-color-regular, #606266);
          white-space: nowrap;
        }
        .width-slider {
          width: 120px;
        }
        .width-value {
          min-width: 35px;
          font-size: 12px;
          font-weight: 600;
          color: var(--el-color-primary, #409eff);
          text-align: center;
        }
        .width-presets {
          display: flex;
          gap: 4px;
          .el-button {
            min-width: 32px;
            height: 20px;
            padding: 2px 6px;
            font-size: 11px;
            &.active {
              color: white;
              background-color: var(--el-color-primary, #409eff);
              border-color: var(--el-color-primary, #409eff);
            }
            &:hover:not(.active) {
              background-color: var(--el-fill-color-light, #f5f7fa);
            }
          }
        }
      }
    }
    .thinking-chain-warp {
      margin-bottom: 12px;
      overflow: hidden;
      background: #fafafa;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      .thinking-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease;
        &:hover {
          background-color: #f5f5f5;
        }
        .thinking-title {
          display: flex;
          flex: 1;
          gap: 12px;
          align-items: center;
          .thinking-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            .thinking-icon {
              width: 20px;
              height: 20px;
              color: #60a5fa; // 浅蓝色，更接近图片
              transition: all 0.3s ease;
              svg {
                width: 100%;
                height: 100%;
              }
              &.is-thinking {
                color: #3b82f6; // 思考时稍微深一点
                animation: thinking-pulse 2s ease-in-out infinite;
              }
            }
          }
          .thinking-info {
            display: flex;
            gap: 8px;
            align-items: center;
            .thinking-label-text {
              font-size: 15px;
              font-weight: 600;
              color: var(--el-text-color-primary, #303133);
            }
            .thinking-time {
              font-size: 13px;
              font-weight: 400;
              color: var(--el-text-color-regular, #606266);
            }
          }
          .thinking-status {
            display: flex;
            gap: 4px;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #6b7280;
            .thinking-dots {
              display: flex;
              gap: 2px;
              .dot {
                width: 3px;
                height: 3px;
                background-color: #6b7280;
                border-radius: 50%;
                animation: thinking-dots 1.4s infinite ease-in-out;
                &:nth-child(1) { animation-delay: -0.32s; }
                &:nth-child(2) { animation-delay: -0.16s; }
                &:nth-child(3) { animation-delay: 0s; }
              }
            }
          }
        }
        .collapse-icon {
          font-size: 16px;
          color: #6b7280;
          transition: transform 0.2s ease;
          &.is-collapsed { transform: rotate(-90deg); }
        }
        .thinking-actions {
          display: flex;
          gap: 8px;
          align-items: center;
          .collapse-btn {
            height: 24px;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 400;
            color: #6b7280;
            border-radius: 4px;
            &:hover { background-color: #f3f4f6; }
          }
        }
      }
      .thinking-content {
        max-height: 400px;
        padding: 0 12px 12px;
        overflow: hidden;
        border-top: 1px solid #e5e7eb;
        transition: all 0.3s ease;
        &.is-collapsed { max-height: 0; padding: 0 12px; }
        .thinking-text {
          padding: 12px;
          background: #ffffff;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          .thinking-content-text {
            padding: 8px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 13px;
            line-height: 1.6;
            color: #374151;
            word-break: break-word;
            white-space: pre-wrap;
            background: #f9fafb;
            border-left: 3px solid #60a5fa;
            border-radius: 4px;
          }
        }
      }
    }

    @keyframes thinking-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.1); }
    }

    @keyframes thinking-dots {
      0%, 80%, 100% { opacity: 0.5; transform: scale(0.8); }
      40% { opacity: 1; transform: scale(1); }
    }
  }
  :deep() {
    .el-bubble-list { padding-top: 16px; }
    .el-bubble { padding: 0 8px; padding-bottom: 20px; }
    .el-typewriter { overflow: hidden; border-radius: 12px; }
    .user-content {
      display: block;
      max-width: 100%;
      padding: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--el-text-color-primary, #303133);
      word-break: break-word;
      white-space: pre-wrap;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }
    .markdown-body { background-color: transparent; }
    .attachments {
      .name { color: var(--el-text-color-primary); }
      .size { margin-left: 2px; font-size: 12px; color: var(--el-text-color-secondary); }
    }
    .markdown-elxLanguage-header-div { top: -25px !important; }
    .elx-xmarkdown-container { padding: 8px 4px; }
  }
  .chat-defaul-sender { width: 100%; margin-bottom: 22px; }
  :deep(.el-avatar) { --el-avatar-bg-color: var(--el-color-white); }
}
:deep(.elx-files-card-content) {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

// 底部按钮样式
.footer-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 8px;
  .footer-container {
    display: flex;
    gap: 6px;
    align-items: center;
    .el-button {
      --el-button-size: 24px;

      width: 24px;
      height: 24px;
      padding: 0;
      border-radius: 50%;
      transition: all 0.2s ease;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .footer-time {
    margin-left: 8px;
    font-size: 11px;
    color: var(--el-text-color-placeholder, #a8abb2);
  }
}



// 右键菜单样式
.context-menu {
  .context-menu-content {
    min-width: 160px;
    padding: 4px 0;
    background: var(--el-bg-color-overlay, #ffffff);
    border: 1px solid var(--el-border-color-light, #e4e7ed);
    border-radius: 6px;
    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    .context-menu-item {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      font-size: 14px;
      color: var(--el-text-color-primary, #303133);
      cursor: pointer;
      transition: background-color 0.2s ease;
      &:hover {
        background-color: var(--el-fill-color-light, #f5f7fa);
      }
      .el-icon {
        font-size: 16px;
        color: var(--el-text-color-regular, #606266);
      }
      span {
        flex: 1;
        white-space: nowrap;
      }
    }
  }
}

// 复制相关的用户体验优化
.user-content,
.markdown-body {
  position: relative;
  &::selection {
    background-color: var(--el-color-primary-light-8, #ecf5ff);
  }
}

// 复制按钮的状态反馈
.el-button {
  &.copying {
    pointer-events: none;
    opacity: 0.6;
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -6px;
      content: '';
      border: 2px solid transparent;
      border-top: 2px solid var(--el-color-primary, #409eff);
      border-radius: 50%;
      animation: button-loading 1s linear infinite;
    }
  }
}

@keyframes button-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
